{{extend 'layout.html'}}
<!-- begin "edit" block -->
{{
  def shortcut(combo, description):
    return XML('<li><span class="teletype-text">%s</span><span>%s</span></li>' % (combo, description))
  def listfiles(app, dir, regexp='.*\.py$'):
      files = sorted(
         listdir(apath('%(app)s/%(dir)s/' % {'app':app, 'dir':dir}, r=request), regexp))
      files = [x.replace('\\', '/') for x in files if not x.endswith('.bak')]
      return files

  def editfile(path,file,vars={}):
      args=(path,file) if 'app' in vars else (app,path,file)
      url = URL('edit', args=args, vars=vars)
      return A(file, _class='editor_filelink', _href=url, _style='word-wrap: nowrap;')
}}
{{cm=URL('static','codemirror')}}
<link rel="stylesheet" href="{{=cm}}/lib/codemirror.css">
<link rel="stylesheet" href="{{=cm}}/theme/web2py.css">
<script src="{{=cm}}/lib/codemirror.js"></script>
<script src="{{=cm}}/mode/clike/clike.js"></script>
<script src="{{=cm}}/addon/edit/matchbrackets.js"></script>
<script src="{{=cm}}/addon/edit/closetag.js"></script>
{{if TEXT_EDITOR_KEYBINDING == 'emacs':}}<script src="{{=cm}}/keymap/emacs.js"></script>{{pass}}
{{if TEXT_EDITOR_KEYBINDING == 'vi':}}<script src="{{=cm}}/keymap/vim.js"></script>{{pass}}
<script src="{{=cm}}/mode/python/python.js"></script>
<script src="{{=cm}}/mode/xml/xml.js"></script>
<script src="{{=cm}}/mode/css/css.js"></script>
<script src="{{=cm}}/mode/javascript/javascript.js"></script>
<script src="{{=cm}}/mode/htmlmixed/htmlmixed.js"></script>
<script src="{{=cm}}/addon/hint/show-hint.js"></script>
<script src="{{=cm}}/addon/hint/python-hint.js"></script>
<link rel="stylesheet" href="{{=cm}}/addon/hint/show-hint.css">
<script src="{{=cm}}/addon/search/search.js"></script>
<script src="{{=cm}}/addon/search/searchcursor.js"></script>
<script src="{{=cm}}/addon/dialog/dialog.js"></script>
<script src="{{=cm}}/addon/edit/trailingspace.js"></script>
<link rel="stylesheet" href="{{=cm}}/addon/dialog/dialog.css">
<script src="{{=cm}}/addon/selection/active-line.js"></script>
<script src="{{=cm}}/emmet.min.js"></script>
<script src="{{=URL('static','js/ajax_editor.js')}}"></script>
<link rel="stylesheet" href="{{=URL('static/css','typeahead.js-bootstrap.css')}}">
<link rel="stylesheet" href="{{=URL('static/css','web2py-codemirror.css')}}">
<script type="text/javascript">
var current_theme = "web2py";  //Default theme
var current_font_incr = 0; // Default font-size, 0 means don't set
jQuery(document).on('shown click', 'a[data-toggle="tab"]', function (e) {
    var tab_id = jQuery(this).attr('href');
    var editor = jQuery(tab_id + " textarea").data('editor');
    if (editor) {
        editor.setSize(jQuery(tab_id).width(),  jQuery(tab_id).height());
        editor.refresh();
    }
    //jQuery(function(){jQuery('.CodeMirror-scroll').css("height","auto").css("overflow-x","auto");});
});

// Close the selected tab
jQuery(document).on('click', '#filesTab button[class="close"]', function (e) {
    var tab_body   = jQuery(jQuery(this).parent().attr("href"));  // it should be a div
    var tab_header = jQuery(this).parent().parent();              // it should be a li
    var saved = jQuery(tab_body.find('textarea').data('editor')).data('saved');
    var close = true;
    if (saved === false) {
        close = confirm("You are closing an unsaved file")
    }
    if (close) {
        if (tab_header.hasClass('active') === true) { 	//Set active an other tab
            var $prev = jQuery(tab_header).prev();
            if ($prev.length) {
                $prev.children('a[data-toggle="tab"]').tab('show'); // select previous tab
            } else {
                jQuery(tab_header).next().children('a[data-toggle="tab"]').tab('show'); // select next tab
            }
        }
        tab_header.remove(); //remove li of tab
        tab_body.remove();   //remove tab content (div)
    }
});

// Revert current file
jQuery(document).on('click', '#revert', function (e) {
    e.preventDefault();
    load_file(jQuery(this).attr("href"));
});
// Restore current file
jQuery(document).on('click', '#restore', function (e) {
    e.preventDefault();
    load_file(jQuery(this).attr("href"));
});

// open the selected file
jQuery(document).on('click', 'a.editor_filelink', function (e) {
    e.preventDefault();
    var url = jQuery(this).attr("href");
    load_file(url);
});

// change the codemirror theme
jQuery(document).on('click', '#themes a', function (e) {
    e.preventDefault();
    var href = jQuery(this).attr('href');
    var name = jQuery(this).text().replace('.css', '');
    var link = jQuery("<link>");
    link.attr({
        type: 'text/css',
        rel: 'stylesheet',
        href: href
    });
    jQuery("head").append( link );
    jQuery('textarea[name="data"]') .each(function(id, ta) {
        editor = jQuery(ta).data('editor');
        editor.setOption("theme", name);
    });
    jQuery('#themeName').html(name);
    current_theme = name;
//#TODO save on session
});

// incr/decr editor font-size
jQuery(document).on('click', 'a.font_button', function (e) {
    e.preventDefault();
    var id = jQuery(this).attr('id');
    var new_font_incr;
    switch (id) {
        case 'incr': new_incr = 2; break;
        case 'decr': new_incr = -2; break;
        case 'default': new_incr = 0; break;
    }
    jQuery('textarea[name="data"]').each(function(id, ta) {
        editor = jQuery(ta).data('editor');
        set_font(editor, new_incr);
    });
    current_font_incr = (new_incr !== 0) ? current_font_incr + new_incr : 0;
});
    function isFullScreen(instance) {
        return /\bCodeMirror-fullscreen\b/.test(instance.getWrapperElement().className);
    }
    function winHeight() {
        return window.innerHeight || (document.documentElement || document.body).clientHeight;
    }
    function setFullScreen(instance, full) {
        var wrap = instance.getWrapperElement()
        if (full) {
            wrap.className += " CodeMirror-fullscreen";
            wrap.style.height = winHeight() + "px";
            document.documentElement.style.overflow = "hidden";
        } else {
            wrap.className = wrap.className.replace(" CodeMirror-fullscreen", "");
            wrap.style.height = "";
            document.documentElement.style.overflow = "";
        }
        instance.refresh();
    }
    CodeMirror.on(window, "resize", function() {
        var showing = document.body.getElementsByClassName("CodeMirror-fullscreen")[0];
        if (!showing) return;
        showing.CodeMirror.getWrappererElement().style.height = winHeight() + "px";
    });

    {{if len(request.args) > 1:}}
        load_file('{{=URL(f='edit', args=request.args, vars=request.get_vars)}}');
    {{pass}}

</script>

{{block sectionclass}}edit{{end}}


<div class='row-fluid'>
<div class="right controls btn-toolbar pull-right">
<div class="dropdown btn-group pull-left">
    <a class="dropdown-toggle button btn" data-target="themes" data-toggle="dropdown" href="#" >Theme: <span id="themeName" style="color: #E8953C">Web2py</span> <span class="caret"></span></a>
    <ul class="dropdown-menu" role="menu" id="themes">
        {{for f in listfiles('admin', "static/codemirror/theme", regexp='.*\.css$' ):}}
        <li class=""><a href="{{=URL('static/codemirror/theme', f, host=True)}}">{{=f[:-4]}}</a></li>
        {{pass}}
    </ul>
</div>
<div class="btn-group">
    <a id="decr" class="button btn font_button">-</a>
    <a id="default" class="button btn font_button" >A</a>
    <a id="incr" class="button btn font_button">+</a>
</div>
<div class="btn-group">
  {{=button(URL('design',args=request.vars.app if request.vars.app else request.args[0], anchor=request.vars.id), T('back'))}}
  {{#if request.args[1]=='models':}}
  <a class="button btn" href="http://www.web2py.com/sqldesigner" target="_blank"><span>{{=T('online designer')}}</span></a>
  {{#pass}}
  <a class="button btn" href="http://www.web2py.com/examples/static/epydoc/index.html" target="_blank"><span>{{=T('docs')}}</span></a>
</div>
</div>
</div>
<div id="editor_area" class="row-fluid">
    <div id="files">
        <div class="files-toggle"><span class="arrow"></span></div>
        <div class="files-menu">
            <ul class="nav nav-list" rel="pagebookmark" id="filelist">
            <li><input type="text" placeholder="{{=T('Rapid Search')}}" class="input-block-level typeahead-tw search-query"></li>
            {{dirs=[{'name':'models', 'reg':'.*\.py$'},
                {'name':'controllers', 'reg':'.*\.py$'},
                {'name':'views', 'reg':'[\w/\-]+(\.\w+)+$'},
                {'name':'modules', 'reg':'.*\.py$'},
                {'name':'private', 'reg': '[^\.#].*'}]}}
            {{auto_complete_list=[]}}
            {{for dir in dirs:}}
            <li class="nav-header component" onclick="collapse('{{="%s_files" % dir['name']}}');">{{=dir['name']}}</li>
            <li id="{{="%s_files" % dir['name']}}">
                <ul class="nav nav-list small-font">
                {{for f in listfiles(app, dir['name'], regexp=dir['reg'] ):}}
                {{id="%s__" % dir['name'] + f.replace('.','__')}}
                {{current_file = request.args(len(request.args) - 1)}}
                <li class="{{#='active' if current_file==f else ''}}" style="overflow:hidden">
                {{a_tag=editfile(dir['name'], f, dict(id=id))}}
                {{=a_tag}}
                {{auto_complete_list.append({'value':f, 'tokens':f.split('/'), 'a_tag':a_tag})}}
                </li>
                {{pass}}
            </ul>
            </li>
            {{pass}}
            </ul>
        </div>
    </div>
    <div class="span12" id="edit_placeholder">
        <ul class="nav nav-tabs " id="filesTab">
        </ul>
        <div id="myTabContent" class="tab-content">
        </div>
    </div>
</div>
<script>
jQuery(document).ready(function() {
    var filesMenu = jQuery('#files');
    var ow = filesMenu.outerWidth();
    filesMenu.width(ow);
    setTimeout( function(){jQuery('#files').css('left', '-'+ow+'px');}, 1000);
});
</script>
<!-- Typeahead scripts here so the page load faster -->
<script src="{{=URL('static/js', 'typeahead.min.js')}}"></script>
<script src="{{=URL('static/js', 'hogan-2.0.0.js')}}"></script>
<script>
    jQuery('.typeahead-tw').typeahead({
        name: 'files',
        local:{{from gluon.serializers import json}}{{=XML(json(auto_complete_list))}},
        template: template_js,
        engine: Hogan,
    });
    jQuery(document).on("typeahead:selected", '.typeahead', function(e, datum) {
        load_file(datum.link);
        jQuery(this).val('');
    });
</script>
<!-- end "edit" block -->
